Black Friday Sale Upgrade Your Home →

Create a new project with Svelte 3

  • Svelte is a tool for building fast web applications.
  • It's a bit similar to frameworks such React and Vue, which also share the same goal of building fast web interfaces.
  • The difference between Svelt and other frameworks is that Svelte converts your app to optimized Javascript code when it is compiled. Instead of interpreting the application code at the run time.
  • Svelte produces two things
    1. Javascript code
    2. CSS output
  • The Javascript code is optimized for performance. The developer doesn't have to worry about that, its taken care of by the compiler

2. Create a new project with Svelte 3

  • Go to the directory you want to create your Svelte project in and run the following command in the terminal. We're naming the project my-svelte-project.
BASH
npx degit sveltejs/template my-svelte-project
  • We're using npx to run degit. Degit is a tool that makes copies of git repositories. If you run degit some-user/some-repo it will find the latest commit on github and download the associated tar file. Note its faster than git clone because you're not downloading the entire git history.
  • Next go into the directory and run npm install
BASH
cd my-svelte-project && npm install
  • Next start up the development server
BASH
npm run dev
  • You can see it on the browser at localhost:5000.
  • Open the project directory in your favorite editor and open /src/App.svelte and add an h3 tag
HTML
<main>
<h1>Hello {name}!</h1>
<h3>Hello hanii</h3>
<p>
Visit the
<a href="https://svelte.dev/tutorial">Svelte tutorial</a>
to learn how to build Svelte apps.
</p>
</main>

  Previous     Next